```svelte {2,12}
<script lang="ts">
  import { portal } from "@zag-js/svelte"

  // ...
  const id = $props.id()
  const service = useMachine(toast.group.machine, ({ id, store: toaster }))
  const api = $derived(toast.group.connect(service, normalizeProps))

  // ...
</script>

<div use:portal {...api.getGroupProps()}>
  {#each api.getToasts() as toast, index (toast.id)}
    <Toast toast={toast} index={index} parent={service} />
  {/each}
</div>
```
